<template>
  <div class="tabbar">
    <div class="tabbar-item" :class="{ active : activeIndex === index }" v-for="(item ,index) in tabbarData" 
    :key = "index" @click="toggleTabbar(index,item.name)">{{item.title}} </div>
  </div>
</template>
<!-- 底部的组件 -->
<!--创建组件 -->

<script>
//默认导出
export default {
  name: "Tabbar",
  
  props: {
    tabbarData: {
      type: Array,
      default() {
        return [
          { title: "这里是标题1" },//有main才进得来
          { title: "这里是标题2" },
          { title: "这里是标题3" },
          { title: "这里是标题4" },
        ];
      },
    },
  },


  data() {
    return {
      
      activeIndex: 0,
    };
  },

  created(){
    //获取路由信息 这个没有r的 找到不同页面的path 里面的路径
    // console.log("this.$route",this.$route);
    //找到里面的名字  那个name和它一样的 我就激活那个
   
    // console.log("this.tabbarData==>",this.tabbarData);

    //获取一下当前路由名称
    let currentRouteName = this.$route.name;

    for (let i = 0; i < this.tabbarData.length; i++) {

        if (this.tabbarData[i].routeNames.indexOf(currentRouteName) > -1 ) {
            // routeNames在Home那边  >-1找到 -1为找不到
            this.activeIndex = i;
            break;

        }
    }

  },

  methods:{
    //判断数据有没有
    toggleTabbar( index ,routeName){

        if (this.activeIndex === index ) {
            return;
        }

       //存在的时候再跳转
        this.activeIndex = index
        if (routeName) {
            this.$router.push({ name : routeName });
        }
    }
  }

};
</script>

<style lang="less" scoped>
.tabbar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    background-color: #fff;
    .tabbar-item{
      flex-grow: 1;
      text-align: center;
      line-height: 50px;
      font-size: 14px;
      color: #444;
      &.active{
        background-color: #e4393c;
        color: #fff;
      }
    }
  }

</style>
